<template>
  <div class="__date">
    <a-select size="small" placeholder="选择能源类型" v-model:value="formState.dateType" :options="dateTypes"></a-select>
    <a-date-picker :allowClear="false" v-if="formState.dateType ==='month'" size="small" v-model:value="formState.date" picker="month" />
    <div v-else class="range-date">
      <a-date-picker :allowClear="false" size="small" v-model:value="formState.dateDay" picker="date" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed, reactive, watch, defineEmits } from 'vue';
import dayjs from 'dayjs';

const emit = defineEmits(['change'])

const dateTypes = [{
  label: '日',
  value: 'day'
}, {
  label: '月',
  value: 'month'
}]
const formState = reactive({
  dateType: 'month',
  date: dayjs(),
  dateDay: dayjs()
})

watch(formState, () => {
  emit('change', {
    dateType: formState.dateType,
    date: formState.date,
    dateDay: formState.dateDay
  })
})
</script>
<style lang="less" scoped>
.__date {
  display: flex;
  gap: 8px;
  .range-date{
    max-width: 220px;
  }
}
</style>
